<template>
  <div id="recommend-banner">
    <el-carousel
      :interval="40000"
      type="card"
      height="220px">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <a :href="item.url">
          <img
            :src="item.imageUrl"
            alt=""
            @load="imgLoad">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'RecommendBanner',
  data () {
    return {
      banners: null
    }
  },
  created () {
    this._getBanners()
  },
  methods: {
    // 1. 获取banner数据
    async _getBanners (type = 0) {
      const result = await this.$http.get(`/banner?type=${type}`)
      // 获取失败
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('轮播图数据获取失败')
      // 获取成功
      // console.log(result)
      this.banners = result.data.banners
    },
    // 2. 图片加载
    imgLoad () {
      this.$bus.$emit('imgLoad')
    }
  }
}
</script>

<style scoped lang="less">
#recommend-banner {
  // height: 100%;
  .el-carousel__item{
    // height: 50%;
    img {
      // width: 100%;
      height: 100%;
    }
    &.is-active img {
      width: 100%;
      height: 100%;
    }
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
}
</style>

<style lang="less">
#recommend-banner {
  .el-carousel__item.is-active{
    width: 70%;
    left: calc(-1 * calc(10%));
  }
  // .el-carousel__indicators {
  //   position: relative;
  //   .el-carousel__indicator {
  //     position: absolute;
  //     bottom: -200px;
  //   }
  // }
}
</style>
